<script lang="ts" setup>
// 组件引入
import Header from "@/components/header.vue";
import { useRouter } from "vue-router";

// 图表引入
import { House } from "@element-plus/icons-vue";

import { useTimeLine } from '@/hook/TimeLine'

const EarthComponent = defineAsyncComponent(() => {
  return import("@/components/EarthComponent.vue");
});


const layerManage = defineAsyncComponent(() => {
  return import("./component/layerManage.vue");
});

// 依赖项引入
import { onMounted, defineAsyncComponent } from "vue";
import * as Cesium from "cesium";
import { parabola } from "../../utils/GV_DrawFn/earthFn";
import { useEarthStore } from "../../stores/earthObj";
const store = useEarthStore();
import { LineFlowMaterialProperty } from "../../utils/Material/lineFlowMaterialProperty";
let viewer = store.getViewer();
window.useTime = null;
onMounted(() => {
// 简单使用
// let useTime = new useTimeLine('timeline',{
//   reviewNum:24,
//   isCanvas:false,
//   level:0
// })

  initialDrawMain()
});

let TimeoutId:NodeJS.Timeout|null = null;
// 初始化绘制主体函数
const initialDrawMain = ()=>{
    
    let viewer = store.getViewer();
    
    if(!viewer){
        TimeoutId = setTimeout(initialDrawMain,1000)
        return;
    }

    clearTimeout(TimeoutId);
    var clock = new Cesium.Clock({
      startTime : Cesium.JulianDate.fromIso8601("2025-05-12"),
      currentTime : Cesium.JulianDate.fromIso8601("2025-05-12"),
      stopTime : Cesium.JulianDate.fromIso8601("2025-05-13"),
      clockRange : Cesium.ClockRange.LOOP_STOP,
      clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER
    });
    // window.useTime = new Cesium.Timeline(document.getElementById("timeline") as HTMLElement,clock)
    // window.useTime.addEventListener("settime", function (e) {
    //   const newTime = e.timeJulian; // 获取时间轴当前时间
    //   viewer.clock.currentTime = newTime; // 同步到场景时间
    // });
}

let router = useRouter();
// 去主界面
const toEditor = () => {
  router.push("/");
};
</script>
<template>
  <div class="manage">
    <div class="manage_header">
      <Header>
        <template #HeadBtnIcon>
          <el-icon class="icon" @click="toEditor"><House /></el-icon>
        </template>
      </Header>
    </div>
    <div class="Home_Container">
      <EarthComponent></EarthComponent>
    </div>
    <layerManage></layerManage>
    <div id="timeline"></div>
  </div>
</template>
<style>
@import url('../../styles/TimeLine.css');
</style>
<style scoped>
.manage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.manage_header {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3b86ff61;
  z-index: 100;
}
.Home_Container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.icon {
  cursor: pointer;
  margin: 0 7px;
  font-size: 18px;
}
#timeline{
  width: 80%;
  height: 45px;
  position: absolute;
  bottom: 30px;
  left: 10%;
  z-index: 100;
}

</style>
